@page "/components/markdownviewer"

<PageOutlet Url="components/markdownviewer"
            Title="MarkdownViewer"
            Description="markdownviewer component of the bit BlazorUI components" />

<DemoPage Name="MarkdownViewer"
          Description="BitMarkdownViewer is a SEO friendly Blazor wrapper around the famous markedjs library."
          SecondaryNames="@(["MdViewer", "MD"])"
          Parameters="componentParameters"
          GitHubExtrasUrl="MarkdownViewer/BitMarkdownViewer.razor"
          GitHubDemoUrl="Extras/MarkdownViewer/BitMarkdownViewerDemo.razor">
    <NotesTemplate>
        <BitMarkdownViewer Markdown="@("To use this component, you need to install the [**`Bit.BlazorUI.Extras`**](https://www.nuget.org/packages/Bit.BlazorUI.Extras) nuget package, as described in the Optional steps of the [Getting started](/getting-started) page.")" />
        <BitMarkdownViewer Markdown="@("To utilize the **prerender** mode you need to install the [**`Jint`**](https://www.nuget.org/packages/Jint) nuget package on the Server project that is responsible for the prerendering.")" />
    </NotesTemplate>

    <Examples>
        <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
            <BitMarkdownViewer Markdown="@("# Marked in the browser\n\nRendered by [**marked**](https://marked.js.org).")" />
        </DemoExample>

        <DemoExample Title="Advanced" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
            <div>
                <BitMarkdownViewer Markdown="@advancedMarkdown" Class="advanced" />
            </div>
        </DemoExample>

        <DemoExample Title="Events" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
            <BitMarkdownViewer Markdown="@("# Events of the BitMarkdownViewer:\n\n- OnParsing\n- OnParsed\n- OnRendered")"
                               OnParsing="OnParsing"
                               OnParsed="OnParsed"
                               OnRendered="OnRendered" />
            <hr />
            <div>Parsing at [@parsingDateTime?.ToString("o")]</div>
            <div>Parsed at [@parsedDateTime?.ToString("o")]</div>
            <div>Rendered at [@renderedDateTime?.ToString("o")]</div>
        </DemoExample>
    </Examples>
</DemoPage>
